<template>
	<view class="home">
		<view class="header">
			<view class="left" @click="toSelectCity">
				{{store.city.name}}
				<uni-icons type="bottom" size="16"></uni-icons>
			</view>
			<view class="middle">
				<view class="tab" :style="{left:`calc((100% / 4) * ${active})`}"></view>
				<view class="nav-item" :class="{active:active==0}" @click.stop="active=0">
					热映
				</view>
				<view class="nav-item" :class="{active:active==1}" @click.stop="active=1">
					影院
				</view>
				<view class="nav-item" :class="{active:active==2}" @click.stop="active=2">
					待映
				</view>
				<view class="nav-item" :class="{active:active==3}" @click.stop="active=3">
					经典电影
				</view>
			</view>
			<view class="right">
				<uni-icons type="search" size="22"></uni-icons>
			</view>
		</view>
		<view class="content">
			<keep-alive>
				<home-hot v-if="active==0" :getMore="getMore"></home-hot>
				<home-cinema v-else-if="active==1" :getMore="getMore"></home-cinema>
				<home-will v-else-if="active==2" :getMore="getMore"></home-will>
				<home-classic v-else-if="active==3" :getMore="getMore"></home-classic>
			</keep-alive>
		</view>
	</view>
</template>

<script setup>
	import {
		sloveList
	} from "@/util/index.js";
	import {
		useGlobalStore
	} from "@/stores/global.js";
	import {
		getCity,
		getCityList
	} from "@/api/index.js";
	import {
		computed,
		onMounted,
		ref,
		watch
	} from "vue";
	import { onReachBottom } from '@dcloudio/uni-app';
	const store = useGlobalStore();

	const title = '首页';
	const toSelectCity = () => {
		uni.navigateTo({
			url: '/pages/city/city'
		});
	}
	const cityName = ref("");
	uni.getLocation({
		type: 'wgs84',
		success: async (res) => {
			let result = await getCity(res.longitude, res.latitude);
			let data = result.data.data;
			cityName.value = data.city;
		}
	});
	watch(()=>cityName.value, () => {
		let item = store.cacheList.find(el => el?.nm == cityName.value);
		store.city.name = item?.nm;
		store.city.id = item.id;
	});

	const active = ref(0);
	onMounted(async () => {
		let res = await getCityList();
		store.hotsList = res.data.hot;
		store.cacheList = res.data.cts;
		store.cityList = sloveList(res.data.cts);
		console.log(store.cityList);
	});
	const getMore = ref(0);
	onReachBottom(()=>{
		getMore.value++;
	});
</script>

<style lang="scss">
	.home {
		position: relative;
		width: 750rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		&::-webkit-scrollbar{
			display: none;
		}

		.header {
			position: sticky;
			left: 0;
			top: 88rpx;
			z-index: 100;
			width: 100%;
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid var(--gray3);
			box-sizing: border-box;
			padding: 0 20rpx;
			background-color: var(--white);

			.left {
				padding: 0 6rpx;
			}

			.middle {
				position: relative;
				flex-grow: 1;
				display: flex;
				align-items: center;

				.tab {
					position: absolute;
					left: 0;
					bottom: 4rpx;
					width: calc(100% / 4);
					height: 6rpx;
					background-color: var(--red);
					border-radius: 3rpx;
					transition: .1s;
				}

				.nav-item {
					flex: 1;
					height: 80rpx;
					text-align: center;
					line-height: 80rpx;
					transition: .1s;
				}

				.active {
					font-weight: bold;
				}
			}

			.right {
				padding: 0 6rpx;
				padding-left: 10rpx;
			}
		}

		.content {
		}
	}
</style>